<template>
  <div class="card">
    <div class="card-body">
      <div class="media mt-3 mb-3">
        <img class="mr-3" width="200" :src="headImg" />
        <div class="media-body">
          <h5 class="mt-0">{{ meData.realName }}</h5>

          <div class="dl-wrap">
            <div class="dl-dt">电话号码：</div>
            <div>{{ meData.phoneNumber }}</div>
          </div>

          <div class="dl-wrap">
            <div class="dl-dt">用户名：</div>
            <div>{{ meData.userName }}</div>
          </div>

          <div class="dl-wrap">
            <div class="dl-dt">部门：</div>
            <div>{{ meData.deptName }}</div>
          </div>

          <div class="dl-wrap">
            <div class="dl-dt">角色：</div>
            <div>{{ jobList[meData.job] }}</div>
          </div>

          <div class="dl-wrap">
            <div class="dl-dt">身份证号：</div>
            <div>{{ meData.idCard }}</div>
          </div>

          <div class="dl-wrap">
            <div class="dl-dt">身份证照：</div>
            <ul class="list-inline">
              <li class="list-inline-item" v-for="(img, index) in meData.idCardImg" :key="index">
                <img :src="img" height="120" alt="" />
              </li>
            </ul>
          </div>

          <button
            type="button"
            class="btn btn-sm btn-outline-primary"
            @click="modifyVisible = true"
          >
            修 改
          </button>
        </div>
      </div>
    </div>

    <info-modify :visible.sync="modifyVisible"></info-modify>
  </div>
</template>

<script>
import InfoModify from './InfoModify'
import { enumJobCredit } from '@/credit/plugins/enumJob'
import { IMG_DEFAULT } from '@/common/plugins/constant'

export default {
  components: {
    InfoModify,
  },

  props: {},

  data() {
    return {
      jobList: {},
      modifyVisible: false,
    }
  },

  computed: {
    meData() {
      return this.$store.getters.user
    },
    headImg() {
      return this.meData.headImg || IMG_DEFAULT
    },
  },

  watch: {},

  created() {
    this.jobList = { ...enumJobCredit }
    this.jobList.org_corp = '管理员'
  },

  mounted() {},

  methods: {},
}
</script>

<style scoped></style>
